import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import i18n from '@/i18n'

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

// 全局注册组件
// import pageToole from '@/components/pageToole'
// Vue.component('pageToole', pageToole)
// Vue.use 是固定的插件机制, 可以调用传入对象中的 install 方法
import myComponents from '@/components/index'
Vue.use(myComponents)
// 注册一个全局自定义指令
Vue.directive('imgerr', {
  // 当被绑定的元素插入到 DOM 中时……
  // 这里有点类似vue组件的生命周期钩子,
  // 指定使用这个指令的元素,在不同生命周期应该触发的事件
  // 在我们现在的目标, 每当使用这个指令的元素插入页面时, 自动监听错误事件
  // 每当触发就修改 src
  inserted: function(el, option) {
    // 这里要用到两个形参
    // 1. 当前元素本身
    // 2. 指令配置对象
    // console.log(27, el)
    // console.log('当页面元素插入时触发事件')
    // console.log(option.value) // 可以打印绑定自定义指令时的那个1
    // 用原生方法, 监听当前元素的错误
    // 如果发现报错
    el.addEventListener('error', function() {
      // el.src = 'https://img1.baidu.com/it/u=3525202826,1602436254&fm=26&fmt=auto&gp=0.jpg'
      // 绑定的自定义指令右边的值就是option.value
      // 这里处理的是图片加载错误
      el.src = option.value
    })
    // 但是还有另外一种情况就是图片为空，完全没有图片，
    // 上面只能处理加载错误, 但是如果直接不存在 src 不会触发
    // 需要手动处理
    // if(!el.src){
    // el.src = option.value
    // }
    el.src = el.src || option.value
  },
  componentUpdated(el, option) {
    el.src = el.src || option.value
  }
})
// 全局注册过滤器 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意： filter() 不会对空数组进行检测。
// 注意： filter() 不会改变原始数组。
// Vue.filter('formatDate', (old) => {
// split() 方法用于把一个字符串分割成字符串数组。
//   return old.split('T')[0]
// })
// 同时注册多个filter函数
// 如果有大量的函数需要注册成过滤器怎么办
// 这里跟 vue 关系不大, 主要是 js 的用法
// vue 注册过滤器, 需要两个东西, 一个是名称,一个是函数体
// 如果我们能够一次将所有的函数引进来, 遍历注册就可以简单很多
import * as fliterList from '@/filters'
// 遍历里面每一个数据的函数名
for (const key in fliterList) {
  // [key] 函数的获取key值
  // key 拿到的是对应过滤器的函数名而不是字符串
  // console.log(67, key, 888, 'key')
  Vue.filter(key, fliterList[key])
}
Vue.config.productionTip = false

// 全局注册minxi混入语法,可以减少每次进入一个页面要设置if逻辑的代码
import mixin from '@/mixin'
Vue.mixin(mixin)

// // 全局注册混入
// import mixin from '@/mixin'
// Vue.mixin(mixin)

// 全局配置国际化语言包
// import i18n from '@/i18n'
new Vue({
  el: '#app',
  router,
  store,
  // 挂载i18n
  i18n,
  render: h => h(App)
})
